import React, { useEffect, useState } from 'react'
import { PageHeader, Button, Descriptions } from 'antd';
import axios from 'axios';
import moment from 'moment';
function NewsPreview(props) {
    

    const auditList = ['未审核', '审核中', '已通过', '未通过']
    const publishList = ['未发布', '待发布', '已上线', '已下线']
    const colors=['black','orange','green','red']
    const [data, setData] = useState([])
    const getData = async () => {
        let id = props.match.params.id
        const res = await axios.get(`/news/${id}?_expand=category&_expand=role`)
        console.log(res.data);
        setData(res.data)
    }
    useEffect(() => {
        getData()
    }, [props.match.params.id])
    return (

        <div>
            <div>
                {
                    data && <PageHeader
                        ghost={false}
                        onBack={() => window.history.back()}
                        title={data.title}
                        subTitle={data.categoryId}
                    >

                        <Descriptions size="small" column={3}>
                            <Descriptions.Item label="创建者">{data.author}</Descriptions.Item>
                            <Descriptions.Item label="创建时间">
                                <a>{moment(data.createTime).format("YYYY-MM-DD HH:mm:ss")}</a>
                            </Descriptions.Item>
                            <Descriptions.Item label="发布时间">
                                {data.publishTime ? moment(data.publishTime).format("YYYY-MM-DD HH:mm:ss")
                                    : "-"
                                }
                            </Descriptions.Item>
                            <Descriptions.Item label="区域">{data.region}</Descriptions.Item>
                            <Descriptions.Item label="审核状态">
                                <span style={{color:colors[data.auditState]}}>{auditList[data.auditState]}</span>
                            </Descriptions.Item>
                            <Descriptions.Item label="发布状态">
                                <span style={{color:colors[data.auditState]}}>{publishList[data.publishState]}</span>

                            </Descriptions.Item>
                            <Descriptions.Item label="访问数量">{data.view}</Descriptions.Item>
                            <Descriptions.Item label="点赞数量">{data.star}</Descriptions.Item>
                            <Descriptions.Item label="评论数量">0</Descriptions.Item>
                        </Descriptions>
                    </PageHeader>

                        
                    
                }
            </div>
                <div 
                style={{border:"1px solid black",margin:"0 23px"}}
                dangerouslySetInnerHTML={{__html:data.content}}>                    
                </div>

        </div>
    )
}

export default NewsPreview
